<template>
  <div>
    <el-form
      ref="form"
      :label-width="labelWidth"
      :model="optionValue"
      :disabled="allDisabled"
      size="mini"
    >
      <el-row class="elRow" :gutter="30" type="flex" justify="start">
        <el-col
          v-for="(item, key) in options"
          :key="key"
          :span="item.span || 6"
          :offset="item.offset || 0"
          :push="item.push || 0"
          class="grid-content"
          :style="{ zIndex: (item.type === 'inptBer'? 99 : 9) }"
        >
          <!--          style="item.type === 'inptBer'z-index: 99999;"-->

          <!--BOM成本显示权限-->
          <el-form-item
            v-if="item.type === 'bom' && bomCost('bom:price')"
            :label="item.label"
            :prop="key"
            label-width="120px"
            :class="{ 'check-form-spacing': item.spacing }"
            :rules="item.rules"
          >
            <el-input
              v-model="optionValue[key]"
              size="mini"
              class="input-width"
              :disabled="item.disabled"
              :maxlength="item.maxlength || ''"
              :type="item.type"
              :placeholder="item.placeholder || `请输入${item.label || '内容'}`"
            />
          </el-form-item>
          <!--          复杂事件组件-->
          <el-form-item
            v-if="item.type === 'slot'"
            :label="item.label"
            :prop="key"
            :label-width="item.labelWidth || '120px'"
            :rules="item.rules"
            :class="{ 'check-form-spacing': item.spacing }"
          >
            <slot />
          </el-form-item>
          <!--          放大镜获取数据-->
          <el-form-item
            v-else-if="item.type === 'magnifier'"
            :label="item.label"
            :prop="key"
            :label-width="item.labelWidth || '120px'"
            :rules="item.rules"
            :class="{ 'check-form-spacing': item.spacing }"
          >
            <el-input
              v-model="optionValue[key]"
              size="mini"
              class="input-width"
              :readonly="item.readonly"
              :disabled="item.disabled"
              :placeholder="item.placeholder || `请输入${item.label || '内容'}`"
            >
              <i
                v-if="!item.disabled"
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="handleMagnifier(key)"
              />
            </el-input>
          </el-form-item>
          <!--          放大镜获取数据-->
          <el-form-item
            v-else-if="item.type === 'inptBer'"
            :label="item.label"
            :prop="key"
            :label-width="item.labelWidth || '120px'"
            :rules="item.rules"
            :class="{ 'check-form-spacing': item.spacing }"
          >
            <el-input
              v-model="optionValue[key]"
              size="mini"
              class="input-width"
              :readonly="item.readonly"
              :disabled="item.disabled"
              :placeholder="item.placeholder || `请输入${item.label || '内容'}`"
            >
              <i
                slot="prefix"
                class="iconfont icon-jin-rud-ao-bo"
                @click="handleMateriel()"
              />
              <i
                v-if="!item.disabled"
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="handleNumber()"
              />
            </el-input>
          </el-form-item>
          <!--          带输入建议的功能-->
          <el-form-item
            v-else-if="item.type === 'autocomplete'"
            :label="item.label"
            :prop="key"
            label-width="120px"
            :rules="item.rules"
            :class="{ 'check-form-spacing': item.spacing }"
          >
            <el-autocomplete
              v-model="optionValue[key]"
              highlight-first-item
              class="input-width"
              size="mini"
              :disabled="item.disabled"
              :fetch-suggestions="querySearch"
              :placeholder="item.placeholder || `请输入${item.label || '内容'}`"
            />
          </el-form-item>
          <!--          循环值-->
          <el-form-item
            v-else-if="
              item.type === 'text' || item.type === 'password' || !item.type
            "
            :label="item.label"
            :prop="key"
            :label-width="item.labelWidth || '100px'"
            :rules="item.rules"
            :class="{ 'check-form-spacing': item.spacing }"
          >
            <el-input
              v-model="optionValue[key]"
              size="mini"
              class="input-width"
              :disabled="item.disabled"
              :maxlength="item.maxlength || ''"
              :type="item.type"
              :placeholder="item.placeholder || `请输入${item.label || '内容'}`"
            />
          </el-form-item>
          <!--   物料规格-是否管控  -->
          <el-form-item
            v-else-if="item.type === 'text1'"
            :label="item.label"
            :prop="key"
            :label-width="item.labelWidth || '100px'"
            :rules="item.rules"
            :class="{ 'check-form-spacing': item.spacing }"
          >
            <el-input
              v-model="optionValue[key]"
              size="mini"
              class="input-width"
              :disabled="item.disabled || fcontrol"
              :maxlength="item.maxlength || ''"
              :placeholder="item.placeholder || `请输入${item.label || '内容'}`"
            />
          </el-form-item>
          <!-- 描述输入框 -->
          <el-form-item
            v-else-if="item.type === 'input_textarea'"
            :label="item.label"
            :prop="key"
            :label-width="item.labelWidth"
            :rules="item.rules"
            :class="{ 'check-form-spacing': item.spacing }"
          >
            <el-input
              v-model="optionValue[key]"
              size="mini"
              :disabled="item.disabled"
              :type="item.type"
              :placeholder="item.placeholder || `请输入${item.label || '内容'}`"
            />
          </el-form-item>
          <!--          number-->
          <el-form-item
            v-else-if="item.type === 'number'"
            :label="item.label"
            :prop="key"
            :rules="item.rules"
            :label-width="item.labelWidth || '120px'"
            :class="{ 'check-form-spacing': item.spacing }"
          >
            <el-input-number
              v-model="optionValue[key]"
              size="mini"
              controls-position="right"
              class="input-width"
              :disabled="item.disabled"
              :placeholder="item.placeholder || `请输入${item.label || '内容'}`"
            />
          </el-form-item>
          <!--select-->
          <el-form-item
            v-else-if="item.type === 'select'"
            :label="item.label"
            :prop="key"
            :rules="item.rules"
            :label-width="item.labelWidth || '100px'"
            :class="{ 'check-form-spacing': item.spacing }"
          >
            <el-select
              v-model="optionValue[key]"
              :disabled="item.disabled"
              class="input-width"
              :allow-create="item.create || false"
              size="mini"
              :placeholder="item.placeholder || `请选择${item.label || '内容'}`"
              filterable
              default-first-option
              @change="handleChange"
            >
              <el-option
                v-for="option in item.selectItems"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
          </el-form-item>
          <!--          级联选择器-->
          <el-form-item
            v-else-if="item.type === 'cascader'"
            :label="item.label"
            :prop="key"
            :rules="item.rules"
            label-width="100px"
            :class="{ 'check-form-spacing': item.spacing }"
          >
            <el-cascader
              v-model="optionValue[key]"
              class="input-width"
              size="mini"
              :options="item.selectItems"
            />
          </el-form-item>
          <!--selectObj-->
          <el-form-item
            v-else-if="item.type === 'selectObj'"
            :label="item.label"
            :prop="key"
            :rules="item.rules"
            label-width="100px"
            :class="{ 'check-form-spacing': item.spacing }"
          >
            <el-select
              v-model="optionValue[key]"
              :disabled="item.disabled"
              :allow-create="item.create || false"
              :placeholder="item.placeholder || `请选择${item.label || '内容'}`"
              value-key="value"
              size="mini"
              filterable
              default-first-option
              clearable
            >
              <el-option
                v-for="option in item.selectItems"
                :key="option.value"
                :label="option.label"
                :value="option"
              />
            </el-select>
          </el-form-item>
          <!--select-multiple 是否多选-->
          <el-form-item
            v-else-if="item.type === 'multiple'"
            :label="item.label"
            :prop="key"
            :rules="item.rules"
            :label-width="item.labelWidth"
            :class="{ 'check-form-spacing': item.spacing }"
          >
            <el-select
              v-model="optionValue[key]"
              :disabled="item.disabled"
              :allow-create="item.create || false"
              size="mini"
              class="input-width"
              :placeholder="item.placeholder || `请选择${item.label || '内容'}`"
              multiple
              filterable
              clearable
            >
              <el-option
                v-for="option in item.selectItems"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
          </el-form-item>
          <!--          单选框-->
          <el-form-item
            v-else-if="item.type === 'checkbox'"
            :label="item.label"
            :prop="key"
            :rules="item.rules"
            label-width="120px"
            :class="{ 'check-form-spacing': item.spacing }"
          >
            <el-checkbox
              v-model="optionValue[key]"
              :disabled="item.disabled"
            />
          </el-form-item>
          <!--textarea-->
          <el-form-item
            v-else-if="item.type === 'textarea'"
            :label="item.label"
            :prop="key"
            size="mini"
            :rules="item.rules"
            :label-width="item.labelWidth || '120px'"
            :class="{ 'textarea-height': item.textarea }"
          >
            <el-input
              v-model="optionValue[key]"
              :disabled="item.disabled || fcontrol"
              :placeholder="item.placeholder || `请输入${item.label || '内容'}`"
              clearable
            />
          </el-form-item>
          <!--          时间区域-->
          <el-form-item
            v-else-if="item.type === 'date'"
            :label="item.label"
            :prop="key"
            :rules="item.rules"
            :label-width="item.labelWidth || '120px'"
            :class="{ 'check-form-spacing': item.spacing }"
          >
            <el-date-picker
              v-model="optionValue[key]"
              :disabled="item.disabled"
              value-format="yyyy-MM-dd"
              size="mini"
              type="date"
              :clearable="false"
              :editable="false"
              class="input-width"
              :picker-options="pickerOptions"
              :placeholder="
                item.placeholder || `请选择${item.label || '日期和时间'}`
              "
            />
          </el-form-item>
          <!--          dateTime 日期时间-->
          <el-form-item
            v-else-if="item.type === 'dateTime'"
            :label="item.label"
            :prop="key"
            :rules="item.rules"
            label-width="100px"
            :class="{ 'check-form-spacing': item.spacing }"
          >
            <el-date-picker
              v-model="optionValue[key]"
              :disabled="item.disabled"
              size="mini"
              type="datetime"
              :clearable="false"
              :editable="false"
              :placeholder="
                item.placeholder || `请选择${item.label || '日期和时间'}`
              "
            />
          </el-form-item>
          <!--          tag-->
          <el-form-item
            v-else-if="item.type === 'tag'"
            :label="item.label"
            :prop="key"
            :label-width="item.labelWidth || '120px'"
            :class="{ 'check-form-spacing': item.spacing }"
          >
            <el-tag
              v-if="
                optionValue[key] === '重新审核' || optionValue[key] === '是'
              "
              type="danger"
            >
              {{ optionValue[key] }}
            </el-tag>
            <el-tag v-else-if="optionValue[key] === '已审核'" type="success">
              {{ optionValue[key] }}
            </el-tag>
            <el-tag v-else>{{ optionValue[key] }}</el-tag>
          </el-form-item>
          <!-- autocomplete 建议输入 -->
          <el-form-item
            v-else-if="item.type === 'autoTemplate'"
            :label="item.label"
            :prop="key"
            style="position: relative"
            :rules="item.rules"
            :label-width="labelWidth || '120px'"
            :class="{ 'check-form-spacing': item.spacing }"
          >
            <slot v-if="item.type === 'autoTemplate'" name="state" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { GMTToStr } from '@/utils'

export default {
  name: 'Index',
  props: {
    loadAll: {
      type: Array,
      default: function() {
        return []
      }
    },
    labelWidth: {
      type: String,
      default: '100px'
    },
    options: {
      type: Object,
      default: function() {
        return {}
      }
    },
    optionValue: {
      type: Object,
      required: true,
      default: function() {
        return {}
      }
    },
    allDisabled: {
      type: Boolean,
      default: false
    },
    fcontrol: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      }
    }
  },
  methods: {
    handleChange(value) {
      this.$emit('handleChange', value)
    },
    // 放大镜输出值
    handleMagnifier(item) {
      this.$emit('handleMagnifier', item)
    },
    handleNumber() {
      this.$emit('openNumber')
    },
    handleMateriel() {
      this.$emit('mater')
    },
    // 带输入建议
    querySearch(queryString, cb) {
      const restaurants = this.loadAll.map(item => {
        const obj = {}
        obj.value = item
        return obj
      })
      const results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        )
      }
    },
    // 表单预验证
    handleRefData() {
      let flag = null
      this.$refs.form.validate(valid => {
        if (valid) {
          flag = true
        } else {
          flag = false
        }
      })
      return flag
    },

    // 获取表单数据
    handleGetFormData() {
      Object.keys(this.options).map(v => {
        if (this.optionValue[v] && this.options[v].type === 'date') {
          this.optionValue[v] = GMTToStr(this.optionValue[v])
        } else if (this.optionValue[v] && this.options[v].type === 'dateTime') {
          this.optionValue[v] = GMTToStr(this.optionValue[v])
        }
      })
      return this.optionValue
    },
    getOptions() {
      return {
        options: this.options,
        optionValue: this.optionValue
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.elRow {
  display: flex;
  flex-wrap: wrap;
}
.elRow ::v-deep .el-col-6 {
  height: 4vh;
}
.input-width {
  min-width: 156px !important;
}
// 描述框高度问题
.textarea-height {
  margin-top: 10px;
}
.avatar-uploader {
  @include upLoad;
}
.avatar-uploader:hover .magnify {
  display: block;
}

.input-width ::v-deep .el-input__inner {
  width: 100%;
  color: black;
}

.el-textarea ::v-deep .el-textarea__inner {
  color: black;
  min-width: 156px;
}

.describe {
  width: 35vw;
}
.el-col-6 {
  min-width: 156px;
  .input-width {
    min-width: 156px;
  }
}
.check-form-spacing {
  height: 30px !important;
  margin-bottom: 10px !important;
}
.el-form-item {
  height: 35px;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-form-item ::v-deep .el-form-item__error {
  padding-top: 0;
}
</style>
